<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <div :data-id="item.id" class="wb-input" @click.stop>
        <van-field
          :center="true"
          :border="false"
          :maxlength="commonAttr.limitTextNum ? commonAttr.limitTextNum : 100"
          type="text"
          :name="commonAttr.name"
          :readonly="commonAttr.name === 'fixed' ? true : false"
          :placeholder="commonAttr.placeholder"
          :autofocus="autofocus"
          :autocomplete="autocomplete"
          v-model="inputValue"
          :style="styles"
          :class="['padding-8-16', commonAttr.placeholerColor]"
          @input="updateFormValue"></van-field>
        <span class="need-cls font-size-24" v-show="item.commonAttr.need && item.commonAttr.isShowNeed">*</span>
      </div>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { utils } from '@/components/utils/utils'
import { INPUT_USER_TYPES_MAP } from '@/common/const'
import { reactive } from 'vue'

export default {
  name: "WbInput",
  mixins: [utils],
  setup () {
    return reactive({
      autofocus: false,
      autocomplete: 'off',
      inputValue_: '',
    })
  },
  components: {
    InjectTemplate,
  },
  created() {
    this.inputValue_ = this.commonAttr.value;
  },
  computed: {
    inputValue: {
      get(){
        if(this.isH5Edit){
          return this.inputValue_
        }else if((this.commonAttr.isAuto || this.commonAttr.userAttr) && this.userInfo.wbUserData){
          if(this.commonAttr.isAuto || this.commonAttr.userAttr == INPUT_USER_TYPES_MAP.name){
            this.inputValue_ = this.userInfo.wbUserData.name
          }else if(this.commonAttr.userAttr == INPUT_USER_TYPES_MAP.level){
            let text = '';
            //是否是微博认证用户，即加V用户，true：是，false：否，专页无此属性即为false
            //verified_type 微博认证用户类型，当verified为true时，其中0是黄V，1～7是蓝V
            //verified_type_ext 微博认证用户类型扩展字段，当verified_type为0时，0是橙v，1是金v；当verified_type为蓝V时，-1是灰v, 0是普通蓝V，1-50表示不同等级蓝V
            if(this.userInfo.wbUserData.verified){
              if(this.userInfo.wbUserData.verified_type == 0){
                if(this.userInfo.wbUserData.verified_type_ext == 0){
                  text = '橙v';
                }else if(this.userInfo.wbUserData.verified_type_ext == 1){
                  text = '金v';
                }else{
                  text = '黄v';
                }
              }else if(this.userInfo.wbUserData.verified_type >= 1 && this.userInfo.wbUserData.verified_type <= 7){
                text = '蓝v';
              }
            }
            this.inputValue_ = text
          }else{
            this.inputValue_ =  ''
          }
        }
        return this.inputValue_
      },
      set(val){
        this.inputValue_ = val;
      }
    },
  },
  mounted(){
    if(this.inputValue_ && this.inputValue_.length > 0){
      this.updateFormValue();
    }
  },
  methods: {
    updateFormValue(e){
      // this.inputValue_ = e.target.value
      let value;
      if(e){
        value = e.target.value;
      }else if(this.inputValue_ && this.inputValue_.length > 0){
        value = this.inputValue_;
      }
      if(!this.isH5Edit){
        this.$store.commit('updateFormValue', { id:this.item.id, value })
      }
    },
  },
};
</script>

<style lang="scss">
.wb-input {
  display: flex;
  align-items: center;
  width: inherit;
  height: inherit;
  font-size: 0;

  .van-cell{
    width: inherit;
    height: inherit;
  }

  .van-field__body, .van-cell__value--alone, input{
    width: inherit;
    height: inherit;
    line-height: inherit;
    color: inherit;
    background-color: inherit;
    text-align: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: inherit;
    letter-spacing: inherit;
    font-family: inherit;
    font-size: inherit;
    writing-mode: inherit;
  }

  .darkgray::-webkit-input-placeholder {
    color: darkgray;
  }
  .gainsboro::-webkit-input-placeholder {
    color: gainsboro;
  }
  .ghostwhite::-webkit-input-placeholder {
    color: ghostwhite;
  }
  .silver::-webkit-input-placeholder {
    color: silver;
  }
  .whitesmoke::-webkit-input-placeholder {
    color: whitesmoke;
  }
  .aliceblue::-webkit-input-placeholder {
    color: aliceblue;
  }
  .purple::-webkit-input-placeholder{
    color: purple;
  }
}
.wb-input input {
  width: inherit;
  height: inherit;
}

</style>
